<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="js/jsplumb.js"></script>
    <script>
        jsPlumb.ready(function () {
            console.log("this is init jsPlumb.")
        })
    </script>
</head>
<body>
<div id="diagramContainer">
    <div id="item_left" class="item" style="border: 1px solid royalblue; width: 100px; height: 100px"></div>
    <div id="item_right" class="item" style="margin-left:550px;border: 1px solid royalblue; width: 100px; height: 100px"></div>
</div>
<script>
    /* global jsPlumb */
    jsPlumb.ready(function () {
        jsPlumb.setContainer('diagramContainer')

        var common = {
            isSource: true,
            isTarget: true,
            connector: ['Straight']
        }

        jsPlumb.addEndpoint('item_left', {
            anchors: ['Right']
        }, common)

        jsPlumb.addEndpoint('item_right', {
            anchor: 'Left'
        }, common)


        jsPlumb.draggable('item_left')
        jsPlumb.draggable('item_right')




        // 单点击了连接线,
        jsPlumb.bind('click', function (conn, originalEvent) {
            if (confirm('确定删除所点击的链接吗？')) {
                jsPlumb.detach(conn)
            }
        })
    })
</script>
</body>
</html>